<template>
  <div>
    <ul class="list">
      <img class="img1" src="../../../assets/imgs/one-other.png" alt="" />
      <img class="img2" src="../../../assets/imgs/two-other.png" alt="" />
      <img class="img3" src="../../../assets/imgs/three-other.png" alt="" />
      <router-link
        :to="{ path: '/detail', query: { articleId: item.articleId } }"
        tag="li"
        class="freeContent1"
        v-for="(item, index) in $store.state.newList"
        :key="index"
      >
        <li>
          <span class="span1">{{ index + 1 }}</span
          >&nbsp;<span class="span2">{{ item.title }}</span>
        </li>
      </router-link>
    </ul>
  </div>
</template>
<script>
import { hotnews } from "../../../api/api";
export default {
  name: "NewList",
  props: {
    pageNum: {
      type: [String, Number],
    },
    pageSize: {
      type: [String, Number],
    },
  },
  data() {
    return {
      // list: [],
    };
  },

  created() {
    hotnews(this.pageNum, this.pageSize).then((res) => {
      // console.log(res);
      // this.list = res.rows;
      this.$store.commit('changeNewList',{newList:res.rows})
    });
  },
};
</script>
<style scoped lang="less">
.list {
  padding-top: 135px;
  position: relative;
  height: calc(85vh - 70px);
  overflow-y: scroll;
}
/*图片定位*/
.img1 {
  top: 157px;
  left: 10px;
  position: absolute;
}

.img2 {
  top: 209px;
  left: 10px;
  position: absolute;
}

.img3 {
  top: 260px;
  left: 10px;
  position: absolute;
}

.list li {
  height: 40px;
  width: 350px;
  margin-top: 10px;
  /*多余的内容省略掉*/
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid #f2f6f7;
  color: #043970;
  cursor: pointer;
}

.span1 {
  margin: 0 15px;
  color: #f0a5a5;
  font-weight: bold;
  font-size: 15px;
  font-family: 微軟正黑體;
}

.span2 {
  letter-spacing: 1px;
  font-size: 15px;
  font-family: 微軟正黑體;
  font-weight: bold;
}
</style>